<template>
	<view class="container" :style="{height:phone_height+'px'}">
		<view class="user-section">
			<view class="bg"></view>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatarUrl || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<view v-if="hasLogin">
						<text class="username">{{userInfo.nickName || '游客'}}</text>
					</view>
					<view v-else>
						<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="loginBt" >点击登录</button>
					</view>
				</view>
				<view class="select_bill">
					<u-cell-item 
					:valueStyle="{fontWeight: 500,'overflow': 'hidden',
								'text-overflow': 'ellipsis',
								'-ms-text-overflow': 'ellipsis',
								'display': 'box',
								'display': '-webkit-box',
								'line-clamp': 1,
								'-webkit-line-clamp': 1,
								'-webkit-box-orient': 'vertical'}" 
					@click="statusChange()" 
					:value="bill_title"
					hover-class="none"
					:border-bottom="border_bottom"
					>
					</u-cell-item>
				</view>
			</view>
			<view class="vip-card-box">
				
			</view>
		</view>
		
		<view class="cover-container"
			:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
		>
			<image class="arc" src="/static/arc.png"></image>
			
			<view class="tj-sction">
				<view class="tj-item">
					<text class="num">{{ userData.sign_in_day }}</text>
					<text>打卡天数</text>
				</view>
				<view class="tj-item">
					<text class="num">{{ userData.all_bill_day }}</text>
					<text>总记账天数</text>
				</view>
				<view class="tj-item">
					<text class="num">{{ userData.all_bill_count }}</text>
					<text>总记账笔数</text>
				</view>
			</view>
		
			<view class="user-list">
				<u-cell-group>
					<u-cell-item :titleStyle="{fontWeight: 500}" @click="billSetting()" title="账单设置">
						<image slot="icon" class="u-cell-icon" :src="iconList.user_bill" mode="" :lazy-load="lazy_load"></image>
					</u-cell-item>
					<u-cell-item :titleStyle="{fontWeight: 500}" @click="typeSetting()" title="类别设置">
						<image slot="icon" class="u-cell-icon" :src="iconList.user_type" mode="" :lazy-load="lazy_load"></image>
					</u-cell-item>
					<u-cell-item :titleStyle="{fontWeight: 500}" @click="message()" title="记账提醒">
						<image slot="icon" class="u-cell-icon" :src="iconList.user_time" mode="" :lazy-load="lazy_load"></image>
					</u-cell-item>
					
					<button type="default" open-type="feedback" class="list-item">
						<u-cell-item :titleStyle="{fontWeight: 500}" title="建议反馈">
							<image slot="icon" class="u-cell-icon" :src="iconList.user_feedback" mode="" :lazy-load="lazy_load"></image>
						</u-cell-item>
					</button>
									
					<button type="default" open-type="contact" class="list-item">
						<u-cell-item :titleStyle="{fontWeight: 500}" title="联系客服">
							<image slot="icon" class="u-cell-icon" :src="iconList.user_kefu" mode="" :lazy-load="lazy_load"></image>
						</u-cell-item>
					</button>
				</u-cell-group>
			</view>
			
		</view>
	
		<u-select @click="select_bill_show = true" :default-value="default_bill_index" mode="single-column" v-model="select_bill_show" :list="bill_list" @confirm="billConfirm"></u-select>
	</view>
</template>

<script setup>
import { computed, ref } from "vue"

const phone_height = ref(0)
const coverTransform = ref('translateY(0px)')
const coverTransition = ref('0s')
const iconList = {
	add_bill_time:'../../static/add_bill_time.png',
	add_bill_type:'../../static/add_bill_type.png',
	add_bill_desc:'../../static/add_bill_desc.png',
	user_bill:'../../static/user_bill.png',
	user_feedback:'../../static/user_feedback.png',
	user_kefu:'../../static/user_kefu.png',
	user_time:'../../static/user_time.png',
	user_type:'../../static/user_type.png'
}
const userData = ref({
	sign_in_day: 0,
	all_bill_day: 0,
	all_bill_count: 0,
})
const select_bill_show = ref(false)

const providerList = ref([])
const userInfo = ref({
	avatarUrl: "",
	nickName: undefined
})
const bill_title = ref("默认账单")
const lazy_load = ref(true)
const border_bottom = ref(false)
const default_bill_index = ref([0])
const bill_list = ref([
	{
		value: '0',
		label: '默认账单',
		extra: '0'
	}
])

const hasLogin = ref(false)

uni.getStorage({
	key: "userInfo",
	success: function (res) {
		if (res.errMsg === "getStorage:ok" && res.data.avatarUrl) {
			userInfo.value.avatarUrl = res.data.avatarUrl
			userInfo.value.nickName = res.data.nickName
			hasLogin.value = true
		}
	},
	fail: function () {
		hasLogin.value = false
	}
})

// 点击选择账单
function statusChange() {
	select_bill_show = !select_bill_show;
}

// 选择账单回调
function billConfirm(e){
	console.log(e);
}

function onChooseAvatar(e) {
	userInfo.value.avatarUrl = e.detail.avatarUrl
	userInfo.value.nickName = '普通用户'
	uni.setStorage({
		key: "userInfo",
		data: {
			avatarUrl: e.detail.avatarUrl,
			nickName: "普通用户"
		}
	})
	
}

function message(){
	console.log('记账提醒')
}

function billSetting () {
	console.log("账单设置")
}

function typeSetting () {
	console.log("类别设置")
}

// 计算scroll-view高度
uni.getSystemInfo({
	success(res) {
		phone_height.value = res.windowHeight
	}
})
</script>

<style lang="scss" scoped>
.container{
	background-color: #f5f5f5;
}
%flex-center {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
%section {
	display:flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}

.user-section{
	height: 480upx;
	padding: 100upx 30upx 0;
	position:relative;
	.bg{
		position:absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);
		//opacity: .7;
		background-color: #FDDC2D;
	}
}
.user-info-box{
	height: 180upx;
	display:flex;
	align-items:center;
	position:relative;
	z-index: 1;
	.portrait{
		width: 130upx;
		height: 130upx;
		border:5upx solid #fff;
		border-radius: 50%;
	}
	.username{
		font-size: 30rpx;
		color: $font-color-dark;
		margin-left: 20rpx;
	}
}
.vip-card-box{
	display:flex;
	flex-direction: column;
	color: #f7d680;
	height: 240upx;
	//background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
	background: linear-gradient(left, rgba(253, 220, 45, 0.7), rgba(253, 220, 45, 0.8));
	border-radius: 16upx 16upx 0 0;
	overflow: hidden;
	position: relative;
	padding: 20upx 24upx;
	.card-bg{
		position:absolute;
		top: 20upx;
		right: 0;
		width: 380upx;
		height: 260upx;
	}
	.tit{
		font-size: $font-base+2upx;
		color: #f7d680;
		margin-bottom: 28upx;
		.yticon{
			color: #f6e5a3;
			margin-right: 16upx;
		}
	}
	.e-b{
		font-size: $font-sm;
		color: #d8cba9;
		margin-top: 10upx;
	}
	}
	.cover-container{
		background-color: #f5f5f5;
		margin-top: -200rpx;
		position:relative;
		padding-bottom: 20rpx;
	.arc{
		position:absolute;
		left: 0;
		top: 120rpx;
		width: 100%;
		height: 36rpx;
	}
}

.tj-sction{
	@extend %section;

	background-color: #FDDC2D;
	.tj-item{
		@extend %flex-center;
		flex-direction: column;
		height: 140upx;
		font-size: $font-sm;
		color: #7a7a7a;
	}
	.num{
		font-size: 40rpx;
		color: $font-color-dark;
		margin-bottom: 8upx;
	}
}

	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
	.order-item{
		@extend %flex-center;
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		font-size: $font-sm;
		color: $font-color-dark;
	}
	.yticon{
		font-size: 48upx;
		margin-bottom: 18upx;
		color: #fa436a;
	}
	.icon-shouhoutuikuan{
		font-size:44upx;
	}
}

.user-list{
	margin-top: 30upx;
	background: #fff;
	border-radius:10upx;
	switch{
		transform: scale(0.7,0.7)
	}
}
.list-item{
	width: 100%;
	padding: 0rpx;
	background-color: #FFFFFF !important;
	border: initial;
	text-align: initial;
}
.list-item::after{
	border: initial;
}
.share-box{
	width: 70%;
	margin: auto;
	padding-top: 30rpx;
}
.share-button{
	background-color: #FD6A6C !important;
	color: #fff !important;
	font-size: 30rpx !important;
}

.app-item{
	display: inline-block;
	text-align: center;
}
.app-icon-box{
	width: 140rpx;
	height: 140rpx;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.app-icon{
	width: 110rpx;
	height: 110rpx;
}
.app-name{
	font-size: 23rpx;
	width: 150rpx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap; 
	display: -webkit-box; 
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
.u-cell-icon {
	width: 50rpx;
	height: 50rpx;
	margin-right: 30rpx;
}
.select_bill{
	margin-left: auto;
	width: 300rpx;
}

.loginBt {
	background-color: transparent;
	font-size: 30rpx;
	color: $font-color-dark
}
.loginBt::after {
	border: 0;
}


</style>
